<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本分析报告</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
    />
    <style>
      input[type="file"] {
        color: white; /* 让文本颜色变白 */
        background-color: #2a2a2a; /* 深色背景 */
        border: 1px solid #444; /* 适配暗色模式 */
        padding: 8px;
        border-radius: 6px;
      }

      /* 自定义文件选择按钮 */
      input[type="file"]::file-selector-button {
        background: linear-gradient(to right, #444, #222); /* 深色渐变 */
        color: white; /* 文字颜色 */
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.3s;
      }

      /* 悬停时颜色变化 */
      input[type="file"]::file-selector-button:hover {
        background: linear-gradient(to right, #555, #333);
      }

      textarea,
      input[type="file"] {
        background-color: #2a2a2a;
        color: #fff;
        border: 1px solid #555;
      }
      textarea::placeholder {
        color: #bbb;
      }

      .bg-white {
        background-color: #1a1a1a !important;
      }
      .text-gray-800 {
        color: #f8f8f8 !important;
      }
      .text-gray-700 {
        color: #e0e0e0 !important;
      }
      .border-gray-300 {
        border-color: #444 !important;
      }

      .fade-in {
        animation: fadeIn 0.5s ease-in;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .chart-container {
        transition: transform 0.3s ease;
      }
      .chart-container:hover {
        transform: scale(1.02);
      }
    </style>
  </head>
  <body class="bg-black text-white min-h-screen p-8">
    <!-- 输入区域 -->
    <div
      class="max-w-2xl mx-auto mb-8 bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg"
    >
      <form
        id="inputForm"
        action="/"
        method="POST"
        enctype="multipart/form-data"
        class="space-y-4"
      >
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2"
            >输入文本</label
          >
          <textarea
            name="text"
            rows="5"
            class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
            placeholder="请粘贴需要分析的文本..."
          ></textarea>
        </div>
        <div class="flex items-center space-x-4">
          <div class="flex-1">
            <!-- <label class="block text-sm font-medium text-gray-700 mb-2"
              >或上传文件</label
            > -->
            <input
              type="file"
              name="file"
              accept=".txt"
              class="text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-gray-700 file:text-white hover:file:bg-gray-600 transition-colors"
            />
          </div>
          <button
            type="submit"
            class="px-6 py-2 bg-gradient-to-r from-gray-700 to-gray-900 text-white rounded-lg hover:from-gray-600 hover:to-gray-800"
          >
            开始分析
          </button>
        </div>
      </form>
    </div>

    <!-- 结果展示 -->
    <div class="max-w-6xl mx-auto space-y-8" id="resultContainer">
      <!-- 加载状态 -->
      <div id="loading" class="hidden text-center py-12">
        <div
          class="animate-spin inline-block w-12 h-12 border-4 border-blue-500 rounded-full border-t-transparent mb-4"
        ></div>
        <p class="text-gray-600 font-medium">正在分析中，请稍候...</p>
      </div>

      <!-- 分析结果 -->
      <div id="analysisResult" class="hidden space-y-8">
        <!-- 文本概览 -->
        <div class="bg-white rounded-xl shadow-md p-6 fade-in">
          <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
            <svg
              class="w-6 h-6 mr-2 text-blue-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
            文本概览
          </h2>
          <div class="border-gray-300">
            <p id="input-text" class="text-gray-700 leading-relaxed"></p>
          </div>
        </div>

        <!-- 图表区 -->
        <div class="grid md:grid-cols-2 gap-8">
          <!-- 词汇分布 -->
          <div
            class="bg-white rounded-xl shadow-md p-6 fade-in chart-container"
          >
            <h3
              class="text-lg font-semibold text-gray-800 mb-4 flex items-center"
            >
              <svg
                class="w-5 h-5 mr-2 text-purple-500"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
                ></path>
              </svg>
              词汇等级分布
            </h3>
            <canvas id="vocabularyChart" class="max-h-96"></canvas>
          </div>

          <!-- 语法分布 -->
          <div
            class="bg-white rounded-xl shadow-md p-6 fade-in chart-container"
          >
            <h3
              class="text-lg font-semibold text-gray-800 mb-4 flex items-center"
            >
              <svg
                class="w-5 h-5 mr-2 text-green-500"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                ></path>
              </svg>
              语法结构分布
            </h3>
            <canvas id="grammarChart" class="max-h-96"></canvas>
          </div>
        </div>
        <!-- 建议内容 -->
        <div class="bg-white rounded-xl shadow-md p-6 fade-in">
          <h3
            class="text-lg font-semibold text-gray-800 mb-4 flex items-center"
          >
            <svg
              class="w-5 h-5 mr-2 text-blue-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 17v-6a2 2 0 012-2h6m-6 0h6a2 2 0 012 2v6m-6 0h6"
              />
            </svg>
            分析建议
          </h3>
          <div
            id="suggestionBox"
            class="prose max-w-full text-gray-800 prose-blue"
          ></div>
          <!-- <textarea
            id="suggestionBox"
            readonly
            rows="5"
            class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-900 text-white placeholder-gray-400"
            placeholder="暂无建议..."
          ></textarea> -->
        </div>

        <!-- 语义分析 -->
        <div class="bg-white rounded-xl shadow-md p-6 fade-in">
          <h3
            class="text-lg font-semibold text-gray-800 mb-4 flex items-center"
          >
            <svg
              class="w-5 h-5 mr-2 text-orange-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M13 10V3L4 14h7v7l9-11h-7z"
              ></path>
            </svg>
            语义分析结果
          </h3>
          <div id="semanticList" class="grid gap-4 md:grid-cols-2"></div>
        </div>
      </div>

      <!-- 空状态 -->
      <div id="emptyState" class="hidden text-center py-12">
        <div class="mx-auto mb-4 text-gray-400">
          <svg
            class="w-16 h-16 inline-block"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-700 mb-2">暂无分析数据</h3>
        <p class="text-gray-500">请在上方输入或上传文本后点击分析按钮</p>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const form = document.getElementById("inputForm");
        const loading = document.getElementById("loading");
        const resultContainer = document.getElementById("analysisResult");
        const emptyState = document.getElementById("emptyState");

        // 表单提交处理
        form.addEventListener("submit", async (e) => {
          e.preventDefault();
          loading.classList.remove("hidden");
          resultContainer.classList.add("hidden");
          emptyState.classList.add("hidden");

          try {
            const formData = new FormData(form);
            const response = await fetch("/", {
              method: "POST",
              body: formData,
            });

            if (!response.ok) throw new Error("分析失败");
            const result = await response.json();

            // 存储结果并重载页面
            localStorage.setItem("analysisResult", JSON.stringify(result));
            localStorage.setItem("inputText", formData.get("text"));
            window.location.reload();
          } catch (error) {
            console.error(error);
            alert("分析失败，请重试");
            loading.classList.add("hidden");
          }
        });

        // 结果展示逻辑
        const resultData = JSON.parse(localStorage.getItem("analysisResult"));
        const inputText = localStorage.getItem("inputText");

        if (resultData) {
          showAnalysisResult(resultData, inputText);
          emptyState.classList.add("hidden");
          resultContainer.classList.remove("hidden");
        } else {
          emptyState.classList.remove("hidden");
          resultContainer.classList.add("hidden");
        }
        loading.classList.add("hidden");

        function showAnalysisResult(data, text) {
          // 显示输入文本
          document.getElementById("input-text").textContent =
            text || "文件内容分析";

          // 初始化图表
          initVocabularyChart(data.vocabulary_level);
          initGrammarChart(data.grammar);
          initSemanticList(data.main_semantic);
          // 显示建议
          // document.getElementById("suggestionBox").value =
          //   data.suggest || "暂无建议";
          document.getElementById("suggestionBox").innerHTML = marked.parse(
            data.suggest || "暂无建议。"
          );

          // 动画效果
          anime({
            targets: ".fade-in",
            opacity: [0, 1],
            translateY: [20, 0],
            delay: anime.stagger(100),
            duration: 800,
            easing: "easeOutExpo",
          });
        }

        // 修改后的词汇图表颜色（7种不重复）
      function initVocabularyChart(vocabData) {
        const chartData = JSON.parse(vocabData);
        new Chart(document.getElementById("vocabularyChart"), {
          type: "doughnut",
          data: {
            labels: Object.keys(chartData),
            datasets: [{
              data: Object.values(chartData),
              backgroundColor: [
                '#5996d2', // 蓝紫色
                '#10b981', // 翡翠绿
                '#f59e0b', // 琥珀色
                '#ef4444', // 红色
                '#8b5cf6', // 紫罗兰
                '#06b6d4', // 青色
                '#d946ef'  // 粉紫色（新增第七种颜色）
              ],
              borderColor: '#1f2937',
              borderWidth: 2,
            }]
          },
          options: {
            plugins: {
              legend: {
                position: 'right',
                labels: {
                  color: '#e5e7eb',
                  font: { size: 14 }
                }
              }
            }
          }
        });
      }


        function initGrammarChart(grammarData) {
          const chartData = JSON.parse(grammarData);
          new Chart(document.getElementById("grammarChart"), {
            type: "bar",
            data: {
              labels: Object.keys(chartData),
              datasets: [
                {
                  label: "出现频率",
                  data: Object.values(chartData),
                  backgroundColor: "#10b981",
                  borderRadius: 8,
                  borderSkipped: false,
                },
              ],
            },
            options: {
              plugins: {
                legend: { display: false },
                tooltip: { bodyFont: { size: 14 }, titleFont: { size: 16 } },
              },
              scales: {
                y: {
                  beginAtZero: true,
                  ticks: { font: { size: 14 } },
                },
                x: {
                  ticks: { font: { size: 14 } },
                },
              },
              animation: { duration: 1500 },
            },
          });
        }

        function initSemanticList(semanticData) {
          const data = JSON.parse(semanticData);
          const container = document.getElementById("semanticList");
          container.innerHTML = "";

          for (const [key, value] of Object.entries(data)) {
            const item = document.createElement("div");
            item.className = "border-gray-300";
            item.innerHTML = `
                <div class="font-medium text-gray-700 mb-2">${key}</div>
                <div class="text-gray-700 leading-relaxed">${value}</div>
            `;
            container.appendChild(item);
          }
        }
      });
    </script>
  </body>
</html>
